<template>
    <div>
        <uni-list-item >
            <template #header>
            <span class="m-group-radio">
                <template v-if="isType !=='dim'">
                    <radio v-if="single" @click.stop="$emit('eventChange','radioClick')" :checked="getChecked(item)" style="transform:scale(0.7)"/>
                    <checkbox v-else @click.stop="$emit('eventChange','radioClick')" :checked="getChecked(item)" style="transform:scale(0.7)" />
                </template>
            </span>
                <span class="m-group-file-icon">
                <my-icon v-if="item.children || isType === 'dim'" type="icon-wenjianziliao" size="1rem"></my-icon>
                <my-icon v-else size="1rem" type="icon-Vue3_file" ></my-icon>
            </span>
            </template>
            <template #body>
            <span class="m-group-title" @click.stop="handlerClick">
                {{item[label]}}
            </span>
            </template>
            <template #footer>
                <span class="m-group-right-icon"
                      v-if="item.children || isType==='dim'"
                      @click.stop="$emit('eventChange','handleClick')"
                >
                    <uni-icons type="right" size="16" style="color:rgb(187, 187, 187)"></uni-icons>
                </span>
            </template>
        </uni-list-item>
    </div>

</template>

<script>
export default {
    name: "RxGroupItem",
    emits:['eventChange'],
    props:{
        /*单选*/
        single:{},
        isType:{},
        label:{
            default:'name'
        },
        item:{},
        selectGroup:{}
    },
    methods:{
        handlerClick(){
            if(this.isType === 'dim'){ return }
            this.$emit('eventChange','radioClick')
        },
        getChecked(item){
            let select = this.selectGroup.find(obj=>obj.groupId === item.groupId);
            return select ? true : false ;
        }
    }
}
</script>

<style scoped>
.m-group-file-icon,
.m-group-title,
.m-group-radio{
    display: flex;
    align-items: center;
}
.m-group-title{
    flex: 1;

}
.m-group-right-icon{
    font-size: 16px;
    display: flex;
    align-items: center;
    color: rgb(187, 187, 187);
}
.m-group-file-icon{
    padding-right: .4rem;
    color: rgba(255, 149, 43, 1);
}
.m-group-paging{
    position: absolute!important;
    top: 0!important;
}
</style>
